<template>
  <el-config-provider :size="store.globalConfig.componentSize" :locale="elLocale">
    <RouterView />
  </el-config-provider>
</template>

<script lang="ts" setup name="app">
import { useAppStore } from "/@/stores/appStore";
const store = useAppStore();
const router = useRouter();
let resizeTimer = 0;

const elLocale = computed(() => {
  // return i18n.global.messages.value[globalConfig.value.locale];
  return i18n.global.messages.value[store.globalConfig.locale];
});

const resizeWeb = () => {
  if (resizeTimer) {
    return clearTimeout(resizeTimer);
  }
  const _func = () => {
    const html = document.documentElement;
    const rootFontSize = 14;
    const wW = window.innerWidth;
    const whdef = wW / store.DESIGN_DRAFT_WIDTH; //计算比值
    const rem = whdef * rootFontSize;
    html.style.fontSize = rem + "px";
  };
  resizeTimer = window.setTimeout(_func, 300);
};

onBeforeMount(() => {
  resizeWeb();
  window.addEventListener("resize", resizeWeb);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeWeb);
});

watch(
  () => store.globalConfig.locale,
  () => {
    router.go(0);
  }
);
</script>

<style lang="scss"></style>
